<template>

  <div class="containerDiv" v-loading="loading">
    <vxe-table
        border
        style="margin-top: 20px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="configType" title="类型">
        <template #default="{row}">
          {{ row.configType == '0' ? '系统默认' : '自定义' }}
        </template>
      </vxe-column>
      <vxe-column field="configName" width="300" title="模板名称"></vxe-column>
      <vxe-column field="paperSize" title="打印纸张(mm)"></vxe-column>
      <vxe-column title="打印尺寸">
        <template #default="{row}">
          <div>宽:{{ row.width }}mm</div>
          <div>高:{{ row.height }}mm</div>
        </template>
      </vxe-column>
      <vxe-column field="applyModule" title="系统应用模块"></vxe-column>
      <vxe-column field="status" title="设为默认">
        <template #default="{row}">
          <el-switch v-model="row.status" @click="updateStatus(row)" v-hasPermi="['setting:print:save']"/>
        </template>
      </vxe-column>
      <vxe-column title="操作">
        <template #default="{row}">
          <el-button type="text" style="color:green" @click="clickView(row)">预览</el-button>
        </template>
      </vxe-column>
      <vxe-column title="锁定打印机">
        <template #default="{row}">
          <el-link v-if="row.printMachine" type="success" @click="clickSetPrint(row)" v-hasPermi="['setting:print:save']">{{ row.printMachine }}</el-link>
          <el-button v-else type="text" @click="clickSetPrint(row)" v-hasPermi="['setting:print:save']">锁定打印机</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <!--  设置默认打印机-->
    <el-dialog v-model="isShowSetPrint" v-if="isShowSetPrint"
               :before-close="clsePrint"
               title="设置打印机"
               draggable
               width="400px"
               append-to-body
    >
      <div>
        锁定打印机:
        <el-select v-model="printMachine" clearable placeholder="打印机">
          <template v-for="(item,index) in printNameList" :key="index">
            <el-option
                :label="item"
                :value="item"
            />
          </template>
        </el-select>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave"> 保存 </el-button>
          <el-button @click="clsePrint">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!--    预览-->
    <el-dialog v-model="isShowTemp"
               :before-close="closeTemp"
               title="模板预览"
               draggable
               width="400px"
               append-to-body
    >
      <div>
        <img :src="Kdmd" style="width: 100%;">
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeTemp">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {getLodop} from "@/assets/LodopFuncs";
import {getPaperSizeList, getPrintConfigList, updatePrintConfig} from "@/api/scApi";
import Kdmd from "@/assets/images/kdmd.jpg";

const {proxy} = getCurrentInstance()
let loading = ref(false)
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  printType: 4
})
let total = ref(0)
let tableList = ref([])
let LODOP;
let paperSizeList = ref([]) //纸张集合
let printMachine = ref("")//打印机名称
let isShowSetPrint = ref(false)
let isShowTemp = ref(false)
onMounted(() => {
  getList()
  getPrintPaperSize()
  setTimeout(() => {
    LODOP = getLodop();
    getPrinterCount()
  }, 500)

})

let printNameList = ref([]) //打印机集合
function getPrinterCount() {
  LODOP = getLodop();
  if (LODOP) {
    //获取打印机个数
    let printNum = LODOP.GET_PRINTER_COUNT();
    for (let i = 0; i < printNum; i++) {
      printNameList.value.push(LODOP.GET_PRINTER_NAME(i))
    }
  }
}

function getList() {
  getPrintPaperSize()
  loading.value = true
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      tableList.value = res.data.map(item => {
        item.status = item.status == '0' ? true : false
        return item
      })
      total.value = res.total
    }
  }).finally(() => {
    loading.value = false
  })

}

//获取纸张下拉
function getPrintPaperSize() {
  getPaperSizeList({printType: 4}).then(res => {
    if (res.code === 200) {
      paperSizeList.value = res.data
    }
  })
}

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 400;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 400;
}

//修改状态 是否默认
function updateStatus(row) {
  let params = {
    printConfigId: row.printConfigId,
    printType: 4,
    status: row.status ? 0 : 1
  }
  updatePrintConfig(params).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('保存成功')
      getList()
    }
  })
}

let rowData = ref({})

function clickSetPrint(row) {
  rowData.value = row
  isShowSetPrint.value = true
}

//设置打印机
function clickSave() {
  let params = {
    printConfigId: rowData.value.printConfigId,
    printType: 4,
    printMachine: printMachine.value
  }
  updatePrintConfig(params).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('保存成功')
      getList()
    }
  }).finally(() => {
    isShowSetPrint.value = false
  })
}

function clsePrint() {
  printMachine.value=""
  rowData.value = {}
  isShowSetPrint.value = false
}

//预览模板
function clickView(row) {
  rowData.value = row
  isShowTemp.value = true
}

//关闭预览模板
function closeTemp() {
  rowData.value = {}
  isShowTemp.value = false
}

</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 160px);
}
</style>